import { Button, Popconfirm } from 'antd';
import { useRef } from 'react';
import { ButtonGroupsProps } from '../type';

export function ButtonPointsGroups({
  onImport,
  onExport,
  onDeleteAll,
  btnDisabled,
}: ButtonGroupsProps) {
  const fileInputRef = useRef(null);
  return (
    <div className='flex justify-between p-2'>
      <div className='flex '>
        <input
          type='file'
          accept='.txt,.csv'
          onChange={onImport}
          style={{ display: 'none' }}
          ref={fileInputRef}
        />
        <Button
          type='primary'
          htmlType='button'
          onClick={() => {
            if (fileInputRef.current) {
              fileInputRef.current.value = ''; // 清空上一次的文件，使得两次选择相同的文件也能触发 onChange
              fileInputRef.current.click();
            }
          }}>
          导入TXT/CSV
        </Button>

        <Button
          disabled={btnDisabled}
          onClick={onExport}
          className='ml-2'>
          导出CSV
        </Button>
      </div>
      <Popconfirm
        title={'是否删除所有表格数据'}
        onConfirm={onDeleteAll}
        okText='确认'
        cancelText='取消'>
        <Button
          danger
          disabled={btnDisabled}>
          删除所有行
        </Button>
      </Popconfirm>
    </div>
  );
}
